<!-- 病害详情 -->
<template>
	<view class="detail-box">
		<navBar title="病害详情" goBackUrl="/pages/homePage/homePage" @goBack="goBack"></navBar>
		<view class="top-title">{{detailInfo.lineSiteSectionName}}</view>
		<view class="dis-localtion">
			<text class="lo-text">派单详情</text>
			<view class="lo-menu">
				<view class="menu-fl border-bottom">
					<text>工单号</text>
					<text>{{dispatchlInfo.orderNo}}</text>
				</view>
				<view class="menu-fl border-bottom">
					<text>截至日期</text>
					<text>{{ dispatchlInfo.endDate && getDate(dispatchlInfo.endDate) || ''}}</text>
				</view>
				<view class="menu-fl border-bottom">
					<text>施工班组</text>
					<text>{{ dispatchlInfo.team}}</text>
				</view>
				<view class="menu-fl">
					<text>提交时间</text>
					<text>{{dispatchlInfo.createTime || ''}}/{{dispatchlInfo.createUserName || ''}}</text>
				</view>
			</view>
		</view>
		<view class="dis-localtion">
			<text class="lo-text">病害位置</text>
			<view class="lo-menu">
				<view class="menu-fl border-bottom" v-if="getContent2(detailInfo)">
					<text>里程</text>
					<text>{{ getContent2(detailInfo) }}</text>
				</view>
				<view class="menu-fl border-bottom" v-if="getRingNum(detailInfo)">
					<text>环号</text>
					<text>{{ getRingNum(detailInfo) }}</text>
				</view>
				<view class="menu-fl" v-if="detailInfo.stationLocation">
					<text>车站位置</text>
					<text>{{detailInfo.stationLocation}}</text>
				</view>
				<view class="menu-fl" v-if="detailInfo.others">
					<text v-if="detailInfo.lineSiteSectionType === 'cz' || detailInfo.lineSiteSectionType === 'qj'">其他</text>
					<text v-else>位置</text>
					<text>{{detailInfo.others}}</text>
				</view>
				<view class="menu-fl" v-if="detailInfo.clockwisePosition">
					<text>时针位置</text>
					<text>{{detailInfo.clockwisePosition}}</text>
				</view>
			</view>
		</view>
		<view class="dis-localtion" style="margin-bottom: 0;">
			<text class="lo-text">病害现状</text>
			<view class="lo-menu">
				<view class="menu-f border-bottom">
					<text>{{ detailInfo.diseaseStatus || ''}}</text>
				</view>
				<view class="menu-fl border-bottom">
					<text>病害等级</text>
					<text>{{detailInfo.diseaseGradeName || ''}}{{detailInfo.diseaseNo || ''}}</text>
				</view>
			</view>
		</view>
		<view class="swich-selection">
			<view class="selection-choose border-bottom">
				<view class="choose-text ">砂性土层</view>
				<!-- <u-switch v-model="detailInfo.isSandySoil" disabled></u-switch> -->
				<text>{{detailInfo.isSandySoil? '是' : '否'}}</text>
			</view>
			<view class="selection-choose border-bottom">
				<view class="choose-text">影响设备</view>
				<!-- <u-switch v-model="detailInfo.isInfluenceEquipment" disabled></u-switch> -->
				<text>{{detailInfo.isInfluenceEquipment? '是' : '否'}}</text>
			</view>
			<view class="selection-choose border-bottom" v-if="detailInfo.isInfluenceEquipment">
				<view class="choose-text">影响设备位置</view>
				<text style="padding: 30rpx 0 0 30rpx;">{{detailInfo.deviceLocation}}</text>
			</view>
			<view class="selection-choose">
				<view class="choose-text">铁路保护区段</view>
				<!-- <u-switch v-model="detailInfo.isProtectionSection" disabled></u-switch> -->
				<text>{{detailInfo.isProtectionSection? '是' : '否'}}</text>
			</view>
		</view>
		<view class="dis-localtion">
			<text class="lo-text">病害图片</text>
			<view class="lo-menu">
				<commonLookImage :imageArr="imgs" width="90px" height="90px" style="padding: 20rpx 0;"></commonLookImage>
			</view>
		</view>
		
		<!-- 视频开始 -->
		<view-video v-if="videoList && videoList.length > 0" :videoList="videoList" :playVideoSrc="playVideoSrc" @lookVideo="lookVideo" @closedVideo="closeVideo"></view-video>
		
		<view class="dis-localtion">
			<text class="lo-text">修复措施</text>
			<view style="padding: 20rpx 0 20rpx 70rpx;opacity: 0.8; ">
				{{detailInfo.repairMethod || ''}}
			</view>
		</view>
		<view class="content-colot"></view>
		
		<view class="dis-localtion border-bottom" style="margin-bottom: 0;">
			<view class="lo-menu">
				<view class="menu-fl">
					<text>巡查人员</text>
					<text>{{detailInfo.inspectUser}}</text>
				</view>
			</view>
		</view>
		<view class="dis-localtion" style="margin: 0;">
			<view class="lo-menu">
				<view class="menu-fl">
					<text>提交时间</text>
					<text>{{ getDate2(detailInfo.createDate)}} / {{detailInfo.createUserName}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDispatchDetail
	} from '@/api/engineeringMaintenance/engineeringMaintenance.js'
	import mixins from '@/utils/mixins.js'
	import viewVideo from "@/subpackage-enginner/pages/engineeringMaintenance/common/viewVideo.vue"
	import {
		getPicture
	} from '@/api/doc.js'
	export default {
		mixins: [mixins],
		components:{
			viewVideo
		},
		data() {
			return {
				value: 1,
				detailInfo: {},
				dispatchlInfo: {},
				imgs: [],
				mileage: '',
				videoList:[],
				playVideoSrc:'',
			}
		},
		onLoad(params) {
			if (params && params.id) {
				this.getDetailInfo(params.id)
				this.mileage = params.type
				console.log(params.type, '=======')
			}
		},
		
		methods: {
			lookVideo(url) {
				this.playVideoSrc = url;
			},
			closeVideo(){
				this.playVideoSrc = ''
			},
			goBack() {
				uni.navigateBack()
			},
			// 滑块选择器
			swichChange(e) {
				console.log(e);
			},
			//详情信息
			getDetailInfo(id) {
				getDispatchDetail({
					id
				}).then(async res => {
					console.log(res, '派单详情')
					if (res.success) {
						this.detailInfo = res.result.diseaseOrder
						this.$set(this.detailInfo, 'mileage', this.mileage)
						
						this.dispatchlInfo = res.result.repairOrder
						this.$set(this.dispatchlInfo, 'createTime', this.getDate(this.dispatchlInfo.recordCreateDate))
						if (this.detailInfo.docId) {
							this.imgs = await this.getItemImage(this.detailInfo.docId)
						}
						if(this.detailInfo.videoDocId) {
							this.videoList = await this.getVideoList(this.detailInfo.videoDocId) || []
							console.log(this.videoList,'=====');
						}
					}
				})
			},
			/**
			 * 获取到docId中的图片并且拼成网络路径格式
			 * @param {Number} docId
			 * @return {String} //拼好的网络路径格式
			 */
			async getItemImage(docId) {
				return await new Promise((resolve, reject) => {
					getPicture({
						docId
					}).then(res => {
						let imgResult = res.result.filter(item => item.contentType.substring(0, item
							.contentType.indexOf("/")) === 'image')
						resolve(imgResult.map(it => ({
							url: this.$config.IMG_FILE_URL + it.fileName,
							id: it.id
						})));
					}).catch(err => reject(err))
				})
			},
			async getVideoList(docId) {
				return await new Promise((resolve, reject) => {
					getPicture({
						docId
					}).then(res => {
						let videoResult = res.result.filter(item => item.contentType.substring(0, item
							.contentType.indexOf("/")) === 'video')
						resolve(videoResult.map(it => ({
							url: this.$config.VIDEO_URL + it.fileName,
							id: it.id
						})));
					}).catch(err => reject(err))
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.border-bottom {
		border-bottom: 1px solid #e6e9f0;
	}

	.detail-box {
		background-color: #f5f5f9;
		// min-height: 100vh;
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
		.top-title {
			height: 100rpx;
			line-height: 120rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #445469;
			// padding: 0rpx 30rpx;
			margin: 0 30rpx;
		}

		.swich-selection {
			padding-left: 64rpx;
			padding-right: 54rpx;
			background: #ffffff;

			.selection-choose {
				display: flex;
				// height: 90rpx;
				justify-content: space-between;
				// border-bottom: 1px solid #e5e5e5;
				align-content: center;
				flex-wrap: wrap;
				padding: 35rpx 0;

				.choose-text {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #586981;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.dis-localtion {
			background-color: white;
			margin: 20rpx 0;

			.lo-text {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #445469;
				display: inline-block;
				font-size: 32rpx;
				margin-left: 30rpx;
				// padding-top: 16rpx;
				height: 100rpx;
				width: 90%;
				line-height: 100rpx;
				border-bottom: 1rpx solid #e6e9f0;
			}

			.lo-menu {
				padding: 6rpx 54rpx 6rpx 64rpx;

				.menu-fl {
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #586981;
					// height: 80rpx;
					// line-height: 80rpx;
					padding: 35rpx 0;

					// &>text:last-child {
					// 	width: 78%;
					// 	display: flex;
					// 	justify-content: flex-end;
					// 	align-items: center;
					// }
				}


				.menu-f {
					padding: 35rpx 0;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #586981;

				}
			}
		}
	}
.video-class /deep/ .u-upload__wrap {
		flex-direction: column;
}
</style>
